<template>
    <div class="callme">
        <div class="img-box">
            <img :src="getLangImg" alt="" />
            <img src="./img/back_up.jpg" alt="" />
        </div>
        <div
            :class="
                $t('callBackImg') === '0' ? 'input-box' : 'input-box pd8794'
            "
        >
            <div class="box-col1">
                <div :class="$t('callBackImg') === '0' ? 'head' : 'head f24'">
                    {{ $t("callme.head1") }}
                </div>
                <div class="des">{{ $t("callme.des1") }}</div>
                <div class="call-type">
                    <div>
                        <img src="./img/icon-dianhua.png" alt="" />
                        <span>400 888 8888 </span>
                    </div>
                    <div>
                        <img src="./img/icon-qq.png" alt="" />
                        <span>1234567890 </span>
                    </div>
                    <div>
                        <img src="./img/icon-youxiang.png" alt="" />
                        <span>213213123@gmail.com</span>
                    </div>
                </div>
                <div class="work-time">
                    {{ $t("callme.time") }}
                </div>
            </div>
            <div class="input-col box-col2">
                <div :class="$t('callBackImg') === '0' ? 'head' : 'head f24'">
                    {{ $t("callme.head2") }}
                </div>
                <div class="des check-box">
                    <div>
                        <img
                            v-if="fetchData.checked === 1"
                            src="./img/icon-check.png"
                            alt=""
                        />
                        <img
                            @click="fetchData.checked = 1"
                            v-else
                            src="./img/icon-uncheck.png"
                            alt=""
                        />
                        <span>{{ $t("callme.check1") }}</span>
                    </div>
                    <div>
                        <img
                            v-if="fetchData.checked === 2"
                            src="./img/icon-check.png"
                            alt=""
                        />
                        <img
                            @click="fetchData.checked = 2"
                            v-else
                            src="./img/icon-uncheck.png"
                            alt=""
                        />
                        <span>{{ $t("callme.check2") }}</span>
                    </div>
                </div>
                <div>
                    <input
                        class="form-control"
                        type="text"
                        :placeholder="$t('callme.input1')"
                    />
                    <input
                        class="form-control"
                        type="text"
                        :placeholder="$t('callme.input2')"
                    />
                    <input
                        class="form-control"
                        type="text"
                        :placeholder="$t('callme.input3')"
                    />
                    <input
                        class="form-control"
                        type="text"
                        :placeholder="$t('callme.input4')"
                        v-model="fetchData.phone"
                    />
                    <div class="code-input-box">
                        <input
                            class="form-control code-input"
                            type="text"
                            :placeholder="$t('callme.input5')"
                        />
                        <el-button
                            @click="getCode"
                            class="code-btn"
                            type="primary"
                            round
                            >{{
                                pendingCode ? `${second}s` : $t("callme.btn1")
                            }}</el-button
                        >
                    </div>
                    <div class="submit-btn el-button center">
                        {{ $t("callme.btn2") }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Message } from "element-ui";
export default {
    data() {
        return {
            second: 60,
            fetchData: {
                checked: 1,
                phone: null
            },
            timer: null,
            pendingCode: false
        };
    },
    components: {},
    computed: {
        getLangImg() {
            const imgs = [
                require("./img/zh_back.gif"),
                require("./img/en_back.gif"),
                require("./img/zh_c_back.gif")
            ];
            return imgs[this.$t("callBackImg")];
        }
    },
    mounted() {},
    methods: {
        getCode() {
            // const reg = /^[1]([3-9])[0-9]{9}$/;
            // if (!reg.test(this.fetchData.phone)) {
            //     this.$message.error("请输入正确的手机号！");
            //     return false;
            // }
            if (!this.fetchData.phone) {
                Message.error("请输入正确的手机号！");
                return;
            }
            this.startTimer();
        },
        startTimer() {
            this.pendingCode = true;
            let init = 60;
            this.timer && clearInterval(this.timer);
            this.timer = setInterval(() => {
                init--;
                this.second = init;
                if (init === 0) {
                    this.timer && clearInterval(this.timer);
                    this.timer = null;
                    this.pendingCode = false;
                }
            }, 1000);
        }
    }
};
</script>

<style lang="less" scoped>
.f24 {
    font-size: 24px !important;
}
.pd8794 {
    padding: 87px 94px !important;
}
.callme {
    padding-top: 80px;
    position: relative;
    display: flex;
    justify-content: center;
    .img-box > img {
        width: 100%;
    }

    .img-box {
        display: flex;
        flex-direction: column;
    }

    .code-btn {
        width: 110px;
        height: 40px;
        border-radius: 20px;
        background-color: #00ffff;
        .center();
        font-size: 16px;
        color: #fff;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        cursor: pointer;
    }

    .code-input-box {
        .center();
    }

    .code-input {
        width: 220px;
        margin-bottom: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .check-box {
        margin-bottom: 32px;
        .center();
        > div {
            .center();
            margin-right: 50px;
            span {
                font-size: 16px;
                font-weight: bold;
                margin-left: 10px;
            }
        }
    }

    .work-time {
        font-size: 20px;
        font-weight: bold;
        margin: 0 auto;
        margin-top: 100px;
        line-height: 1.5;
        max-width: 350px;
    }

    .call-type {
        width: 330px;
        margin: 0 auto;
        margin-top: 59px;
        text-align: left;
        padding-left: 15px;
        > div {
            display: flex;
            margin-bottom: 34px;
        }
        span {
            font-size: 24px;
            font-weight: bold;
        }
        img {
            max-width: 33px;
            max-height: 33px;
            margin-right: 10px;
        }
    }
    .des {
        font-size: 20px;
        font-weight: bold;
        margin-top: 25px;
        width: 100%;
    }
    .input-box {
        width: 1200px;
        height: 600px;
        border-radius: 5px;
        box-shadow: 0 0 46px 0 #e5e5e5;
        background-color: #ffffff;
        margin: auto;
        z-index: 100;
        position: absolute;
        margin-top: 750px;
        padding: 76px 164px;
        display: flex;
        justify-content: space-between;
        .box-col1 {
            max-width: 430px;
        }
        .box-col2 {
            width: 375px;
        }
    }

    .head {
        font-size: 34px;
        font-weight: bold;
    }

    .submit-btn {
        width: 330px;
        height: 40px;
        border-radius: 5px;
        box-shadow: 0px 6px 4px 0 rgba(63, 63, 63, 0.11);
        background-color: #3f3f3f;
        margin: 0 auto;
        color: #fff;
        margin-top: 25px;
    }
}
</style>
